<template>
  <div style="width: 100%">
    <div id="receipt">
      <div ref="imgView" class="qrcode-container">
        <vue-qr
            style="border-style: solid;border-color: #bbbbbb;height: 340px;width: 340px;margin-top: 50px;margin-left: 635px;"
            ref="qrCode"
            :text="text"
            :logoSrc="logoSrc"
            :color-dark="randomColor"
            :callback="qrCodeCallback"
            width="300"
            height="300">
        </vue-qr>
      </div>
    </div>
    <el-row class="el-row">
      <el-col :span="8" :offset="9">
        <el-button type="primary" class="common-button" @click="handleQrCode(1);">生成随机颜色二维码</el-button>
        <el-button type="primary" class="common-button" @click="handleQrCode(2)">生成带logo二维码</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="9">
        <el-button type="primary" class="common-button" @click="handleQrCode(3)">下载二维码</el-button>
        <el-button type="primary" class="common-button" icon="el-icon-printer" @click="onSubmitCode">二维码打印
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import logo from '@/assets/logo/logo.png'
import print from 'vue-print-nb'
import Vue from "vue";
import M2canvas from "html2canvas";//这是js方法
import printJs from "print-js";
import { getTenant } from '@/utils/auth'

Vue.use(print)
export default {
  name: 'dynamicQrCode',
  components: {VueQr,},
  data() {
    return {
      text: `${window.location.href}`.substring(0, `${window.location.href}`.indexOf('/', `${window.location.href}`.indexOf('//') + 2)) + '/visit?tenant='+getTenant(),
      /* text 取值类似下方写法
      var url = `${window.location.href}`;
      var dubleXg = url.indexOf('//');
      var xg = url.indexOf('/', dubleXg + 2);
      var ret_url = url.substring(0, xg);
      console.log(url);*/
      logoSrc: '',
      randomColor: 'black',
      qrCodeUrl: '', // 存放生成的二维码url
    }
  },
  methods: {
    getUrl() {
      //h t t p : // 1 92.168.0.103:8085/crmsys/qrcode
     // 0 1 2 3 4 5 6 7
      var url = `${window.location.href}`;
      var dubleXg = url.indexOf('//');
      var xg = url.indexOf('/', dubleXg + 2);
      var ret_url = url.substring(0, xg);
      console.log(url);
      return ret_url;
    },
    qrCodeCallback(url) {
      this.qrCodeUrl = url
    },
    handleQrCode(type) {
      switch (type) {
        case 1:
        this.logoSrc=null;
          this.randomColor = this.getColor()
          break
        case 2:
          this.logoSrc = logo
          break
        case 3:
        this.logoSrc=null;
          let name = new Date().getTime();
          let a = document.createElement("a");
          a.style.display = "none";
          a.download = name;
          a.href = this.qrCodeUrl;
          document.body.appendChild(a);
          a.click();
          a.remove()
          break
      }
    },
    getColor() {
      var str = '#'
      var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
      for (var i = 0; i < 6; i++) {
        var num = parseInt(Math.random() * 16)
        str += arr[num]
      }
      return str
    },
    onSubmitCode() {
      let imgTag = this.$refs["imgView"],
          // 生成canvas前的参数配置，详细配置信息请参考官方文档
          params = {
            dpi: window.devicePixelRatio * 2 /* DPI 清晰度 */,
            scale: 2 /* 放大倍数 */,
            useCORS: true
          };
      // 生成canvas图片文件流信息
      M2canvas(imgTag, params).then((canvas) => {
        // 生成用于展示的数据地址
        printJs({
          printable: 'receipt',
          header: `<h1 style="font-size: 22px; text-align: center; color: #333; margin-top:40px;  ">前台扫码</h1>`,
          type: 'html',
          style: '@page { size: auto;  margin: 0mm; } .qrcode-container { text-align: center; margin-top:300px; }' // 在这里调整二维码的样式
        });
      });
      this.tenantCodeShow = false;
    },
  }
}
</script>

<style  lang="scss" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

</style>
